<div id="app" v-cloak>
    <div class="flex-row flex-content-start flex-item-center">
        <el-form ref="seach_form" v-show="openSeach" :inline="true" class="flex-row flex-wrap">

            <el-form-item v-for="(item,key) in seachObj" :label="item.title">
                <el-input v-if="item.seachType==`input`" v-model="item.value" :placeholder="`请输入`+item.title"></el-input>
                <el-date-picker
                        v-if="item.seachType==`datetimerange`"
                        v-model="item.value"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSeach" color="#626aef">搜索</el-button>
                <el-button type="danger" @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="flex-row flex-item-center seach-class">
        <div>
            <el-button type="primary" color="#626aef" @click="handleAdd">添加</el-button>
        </div>
        <div>
            <el-button type="plain" @click="handleRefresh">
                <el-icon><Refresh /></el-icon>
            </el-button>
        </div>

        <div v-if="seachShow">
            <el-switch
                    v-model="openSeach"
                    class="ml-2"
                    active-text="搜索"
                    inactive-text="隐藏"
                    @change="changeSeach"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            />
        </div>
<!--        <el-button type="danger" @click="handleDeleteAll">批量删除</el-button>-->
    </div>
    <el-table
            table-layout="fixed"
            row-key="id"
            :data="dataObj.rows"
            height="640"
            :show-overflow-tooltip="true"
            :highlight-current-row="true"
        style="width: 100%;margin-top: 10px">
        <el-table-column type="selection" :selectable="selectable" width="55"></el-table-column>
        <el-table-column label="用户名" prop="username" ></el-table-column>
        <el-table-column label="昵称" prop="nickname" align="center"></el-table-column>
        <el-table-column label="头像" prop="avatar" align="center">
            <template #default="scope">
                <img :src="scope.row.avatar" alt="" style="width: 50px; height: 50px; border-radius: 50%;">
            </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickname" align="center"></el-table-column>
        <el-table-column label="分组名" prop="groups_text" align="center"></el-table-column>
        <el-table-column label="邮箱" prop="email" align="center"></el-table-column>
        <el-table-column label="操作"  align="center">
            <template #default="scope">
                <el-button type="primary" color="#626aef" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button v-if="scope.row.id!=1" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="flex-row flex-content-end">
        <el-pagination
                :hide-on-single-page="1"
                :current-page="dataObj.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="dataObj.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataObj.total"
                prev-text="上一页"
                next-text="下一页"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</div>